<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        size="small"
        class="filter-item"
        v-model="listQuery.app_client_name"
        placeholder="成员名称"
        style="width: 220px"
        clearable
      />
      <el-input
        size="small"
        class="filter-item"
        v-model="listQuery.app_client_id"
        placeholder="成员编号"
        style="width: 220px"
        clearable
      />
      结算账期:
      <el-date-picker
        size="small"
        class="filter-item"
        v-model="dateArr"
        type="monthrange"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM"
        unlink-panels
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      ></el-date-picker>
      <el-select
        v-model="listQuery.invoice_status"
        placeholder="开票状态"
        clearable
        style="width: 120px"
        class="filter-item"
        size="small"
      >
        <el-option label="已开票" value="1" />
        <el-option label="未开票" value="0" />
      </el-select>
      <el-select
        v-model="listQuery.confirm_status"
        placeholder="确认状态"
        clearable
        style="width: 120px"
        class="filter-item"
        size="small"
      >
        <el-option label="已确认" value="1" />
        <el-option label="未确认" value="0" />
      </el-select>
      <el-select
        v-model="listQuery.pay_status"
        placeholder="付款状态"
        clearable
        style="width: 120px"
        class="filter-item"
        size="small"
      >
        <el-option label="已付款" value="1" />
        <el-option label="部分付款" value="2" />
        <el-option label="未付款" value="0" />
      </el-select>

      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
        size="small"
        >搜索
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      :row-class-name="tableRowClassName"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="结算账期">
        <template slot-scope="scope">
          {{ moment(scope.row.settlement_date).format('YYYY-MM') }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="结算成员名称">
        <template slot-scope="scope">
          {{ scope.row.app_client_name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="结算成员ID">
        <template slot-scope="scope">
          {{ scope.row.app_client_id }}
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="结算成员状态"
        min-width="110"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.is_normal == 1" type="success">正常</el-tag>
          <el-tag v-else type="warning">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单数">
        <template slot-scope="scope">
          {{ scope.row.order_num }}
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="确认状态"
        min-width="110"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.confirm_status == 1" type="success"
            >已确认</el-tag
          >
          <el-tag v-else type="warning">未确认</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="支付状态"
        min-width="110"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.pay_status == 1" type="success"
            >已付款</el-tag
          >
          <el-tag v-else-if="scope.row.pay_status == 2" type="success"
            >部分付款</el-tag
          >
          <el-tag v-else type="warning">未付款</el-tag>
        </template>
      </el-table-column>

      <!--      <el-table-column class-name="status-col" label="查看凭证" min-width="110" align="center">-->
      <!--        <template slot-scope="scope">-->
      <!--         {{scope.row.pay_proofs}}-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column
        class-name="status-col"
        label="发票状态"
        min-width="110"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.invoice_status == 1" type="success"
            >已开票</el-tag
          >
          <el-tag v-else type="warning">未开票</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="账期应付金额">
        <template slot-scope="scope">
          {{ scope.row.total_actual_channel_money }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="补差" min-width="140">
        <template slot-scope="scope">
          <div v-if="scope.row._editing">
            <el-input
              v-model="scope.row._make_up_diff_edit"
              size="mini"
              @blur="submitMakeUpDiff(scope.row)"
              @keyup.enter.native="submitMakeUpDiff(scope.row)"
              style="width: 80px"
            />
          </div>
          <div
            v-else
            @click="enableEdit(scope.row)"
            style="
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            <span>{{ scope.row.make_up_diff }}</span>
            <i class="el-icon-edit" style="margin-left: 5px; color: #409eff" />
          </div>
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-download"
            v-if="scope.row.make_up_diff_proofs"
            @click="downloadDiff(scope.row)"
          >
            下载补差明细
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="总计应付金额" width="120px">
        <template slot-scope="scope">
          {{ scope.row.total_money }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="已付款总额" width="120px">
        <template slot-scope="scope">
          {{ scope.row.paid_money }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="待付款总额" width="120px">
        <template slot-scope="scope">
          {{ scope.row.wait_paid_money }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="成本价" width="120px">
        <template slot-scope="scope">
          {{ scope.row.wait_paid_money }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="锦江成本总计" width="120px">
        <template slot-scope="scope">
          {{ scope.row.total_cost }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="锦江实际账期成本" width="120px">
        <template slot-scope="scope">
          {{ scope.row.total_actual_cost }}
        </template>
      </el-table-column>
      <el-table-column label="账单日" min-width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.created_at }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="到期对账日" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.confirm_expire_at }}
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="账期状态"
        min-width="110"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.account_period_status == 0" type="warning"
            >未出账</el-tag
          >
          <el-tag
            v-else-if="scope.row.account_period_status == 1"
            type="success"
            >已出账</el-tag
          >
          <el-tag v-else type="danger">已关账</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="到期付款日" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.pay_expire_at }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="延误付款日" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.pay_delayed_expire_at }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        min-width="320px"
      >
        <template slot-scope="scope">
          <div style="margin-top: 0px">
            <div>
              <el-button
                style="display: inline-block"
                size="mini"
                type="success"
                @click="geToOrderDetail(scope.row)"
              >
                订单明细
              </el-button>

              <download-excel
                style="display: inline-block; margin-left: 15px"
                class="filter-item"
                :fields="json_fields"
                :fetch="() => handleExport(scope.row)"
                type="xls"
                name="订单明细.xls"
                worksheet="订单明细"
              >
                <el-button
                  size="mini"
                  type="success"
                  :loading="exportLoadingMap[scope.row.id] === true"
                >
                  下载明细
                </el-button>
              </download-excel>
            </div>
          </div>
          <div style="margin-top: 5px">
            <el-button
              size="mini"
              type="warning"
              @click="handleInvoice(scope.row)"
              >上传发票凭证
            </el-button>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-download"
              @click="downloadInvoice(scope.row)"
            >
              下载发票
            </el-button>
          </div>
          <div style="margin-top: 5px">
            <el-button size="mini" type="warning" @click="handleDiff(scope.row)"
              >上传补差明细
            </el-button>
            <el-button size="mini" type="primary" @click="showInfo(scope.row)">
              开票信息
            </el-button>
          </div>
          <div style="margin-top: 5px">
            <el-button
              size="mini"
              type="warning"
              @click="handleDetail(scope.row)"
              >手动扣款
            </el-button>
            <el-button
              v-if="new Date(scope.row.confirm_expire_at) >= new Date()"
              size="mini"
              type="warning"
              @click="regenerateDetail(scope.row)"
              >重新生成台账
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        :current-page="listQuery.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="listQuery.limit"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      title="上传支付凭证"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        label-position="left"
        label-width="120px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="支付凭证" prop="pay_proof">
          <upload-one
            v-model="form.pay_proof"
            :url="form.pay_proof"
            width="200px"
            height="200px"
          ></upload-one>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveData" :loading="btnLoading"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="上传发票凭证"
      :visible.sync="dialogFormVisible1"
      :close-on-click-modal="false"
    >
      <el-form
        ref="form1"
        :rules="rules1"
        :model="form1"
        label-position="left"
        label-width="120px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="发票凭证" prop="invoice_proof">
          <upload-one
            v-model="form1.invoice_proof"
            :url="form1.invoice_proof"
            width="200px"
            height="200px"
          ></upload-one>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取消</el-button>
        <el-button type="primary" @click="saveData1" :loading="btnLoading1"
          >确定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="上传补差明细"
      :visible.sync="dialogFormVisible2"
      :close-on-click-modal="false"
    >
      <el-form
        ref="form2"
        :rules="rules2"
        :model="form2"
        label-position="left"
        label-width="120px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="补差明细" prop="make_up_diff_proof">
          <upload-one
            v-model="form2.make_up_diff_proof"
            :url="form2.make_up_diff_proof"
            width="200px"
            height="200px"
          ></upload-one>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取消</el-button>
        <el-button type="primary" @click="saveData2" :loading="btnLoading2"
          >确定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="开票信息"
      :visible.sync="dialogFormVisible3"
      :close-on-click-modal="false"
    >
      <el-form
        :model="form3"
        label-position="left"
        label-width="150px"
        style="width: 400px; margin-left: 50px"
      >
        <el-form-item label="购买方名称">
          <el-input
            :value="form3.buyer_name"
            readonly
            suffix-icon="el-icon-document-copy"
            @click.native="copyText(form3.buyer_name)"
          />
        </el-form-item>
        <el-form-item label="购买方纳税人识别号">
          <el-input
            :value="form3.buyer_taxpayer_no"
            readonly
            suffix-icon="el-icon-document-copy"
            @click.native="copyText(form3.buyer_taxpayer_no)"
          />
        </el-form-item>
        <el-form-item label="地址">
          <el-input
            :value="form3.address"
            readonly
            suffix-icon="el-icon-document-copy"
            @click.native="copyText(form3.address)"
          />
        </el-form-item>
        <el-form-item label="电话">
          <el-input
            :value="form3.phone"
            readonly
            suffix-icon="el-icon-document-copy"
            @click.native="copyText(form3.phone)"
          />
        </el-form-item>
        <el-form-item label="开户行">
          <el-input
            :value="form3.bank"
            readonly
            suffix-icon="el-icon-document-copy"
            @click.native="copyText(form3.bank)"
          />
        </el-form-item>
        <el-form-item label="纳税人资质">
          <el-input
            :value="
              form3.taxpayer_qualification_type === 1
                ? '小微企业'
                : form3.taxpayer_qualification_type === 2
                ? '一般纳税人'
                : ''
            "
            readonly
            suffix-icon="el-icon-document-copy"
            @click.native="
              copyText(
                form3.taxpayer_qualification_type === 1
                  ? '小微企业'
                  : form3.taxpayer_qualification_type === 2
                  ? '一般纳税人'
                  : ''
              )
            "
          />
        </el-form-item>
        <el-form-item label="开票类型">
          <el-input
            :value="
              form3.invoicing_type === 1
                ? '普通发票'
                : form3.invoicing_type === 2
                ? '专用发票'
                : ''
            "
            readonly
            suffix-icon="el-icon-document-copy"
            @click.native="
              copyText(
                form3.invoicing_type === 1
                  ? '普通发票'
                  : form3.invoicing_type === 2
                  ? '专用发票'
                  : ''
              )
            "
          />
        </el-form-item>
        <el-form-item label="发送邮箱">
          <el-input
            :value="form3.email"
            readonly
            suffix-icon="el-icon-document-copy"
            @click.native="copyText(form3.email)"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            :value="form3.remark"
            readonly
            suffix-icon="el-icon-document-copy"
            @click.native="copyText(form3.remark)"
          />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import downloadExcel from 'vue-json-excel'
import { excel2Json } from '@/utils/excel'
import moment from 'moment'

export default {
  components: { downloadExcel },
  data() {
    return {
      exportLoadingMap: {},
      showaddLog: false,
      addLogRules: {
        reason: [
          { required: true, message: '请填写驳回理由', trigger: 'blur' },
        ],
      },
      addLogform: {
        users: [],
        date: '',
        start_date: '',
        end_date: '',
      },
      data: { total_rate: 0, channel_money: 0 },
      list: null,
      total: null,
      listLoading: false,
      exportLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        start_at: '',
        end_at: '',
      },
      userLogsid: '',
      viplist: [],
      json_fields: {
        订单号: {
          field: 'order_id',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        // 自我游订单状态: {
        //   field: 'state',
        //   //自定义回调函数
        //   callback: (value) => {
        //     var state_remark;
        //     switch (value) {
        //       case '0':
        //         state_remark = '新订单'
        //         break;
        //       case '1':
        //         state_remark = '已确认'
        //         break;
        //       case '2':
        //         state_remark = '已成功'
        //         break;
        //       case '3':
        //         state_remark = '已取消'
        //         break;
        //       case '4':
        //         state_remark = '已完成'
        //         break;
        //       default:
        //         state_remark = ''
        //         break;
        //     }
        //
        //     return '<p style="mso-number-format:\'\\@\';">' + state_remark + '</p>'
        //   },
        // },
        下单时间: {
          field: 'order_date',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        渠道结算价: {
          field: 'channel_money',
          //自定义回调函数
          callback: (value) => {
            return value
          },
        },
        渠道价实际账期金额: {
          field: 'actual_channel_money',
          //自定义回调函数
          callback: (value) => {
            return value
          },
        },
        联系人姓名: {
          field: 'link_man',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        联系人手机: {
          field: 'link_phone',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        入住时间: {
          field: 'travel_date',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        离店时间: {
          field: 'end_travel_date',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        实际离店时间: {
          field: 'actual_end_travel_date',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        酒店名称: {
          field: 'hotel',
          //自定义回调函数
          callback: (value) => {
            return (
              '<p style="mso-number-format:\'\\@\';">' +
              (value ? value.inn_name : '') +
              '</p>'
            )
          },
        },
        售卖房型名称: {
          field: 'room_type',
          //自定义回调函数
          callback: (value) => {
            return (
              '<p style="mso-number-format:\'\\@\';">' +
              (value ? value.room_type_name : '') +
              '</p>'
            )
          },
        },
        房间间数: {
          field: 'room_num',
          //自定义回调函数
          callback: (value) => {
            return value
          },
        },
        锦江订单编号: {
          field: 'room_num',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        锦江订单支付总价: {
          field: 'total_rate',
          //自定义回调函数
          callback: (value) => {
            return value
          },
        },
        锦江实际账期金额: {
          field: 'actual_total_rate',
          //自定义回调函数
          callback: (value) => {
            return value
          },
        },
        锦江到店时间: {
          field: 'last_arr_time',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        锦江订单状态: {
          field: 'order_state',
          //自定义回调函数
          callback: (value) => {
            var state_remark
            switch (value) {
              case 1:
                state_remark = '预订成功'
                break
              case 2:
                state_remark = '已取消'
                break
              case 3:
                state_remark = '预订未到'
                break
              case 4:
                state_remark = '已入住'
                break
              case 5:
                state_remark = '已完成'
                break
              default:
                state_remark = ''
                break
            }

            return (
              '<p style="mso-number-format:\'\\@\';">' + state_remark + '</p>'
            )
          },
        },
        锦江支付状态: {
          field: 'pay_state',
          //自定义回调函数
          callback: (value) => {
            var state_remark
            switch (value) {
              case 0:
                state_remark = '未付款'
                break
              case 1:
                state_remark = '已付款'
                break
              case 2:
                state_remark = '退款处理中'
                break
              case 3:
                state_remark = '已退款'
                break
              default:
                state_remark = ''
                break
            }

            return (
              '<p style="mso-number-format:\'\\@\';">' + state_remark + '</p>'
            )
          },
        },
        系统订单号: {
          field: 'system_order_no',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        系统订单状态: {
          field: 'system_order_status',
          //自定义回调函数
          callback: (value) => {
            var state_remark
            switch (value) {
              case 100:
                state_remark = '下单待处理'
                break
              case 101:
                state_remark = '下单成功'
                break
              case 102:
                state_remark = '下单失败'
                break
              case 201:
                state_remark = '取消订单成功'
                break
              case 202:
                state_remark = '取消订单失败'
                break
              default:
                state_remark = ''
                break
            }

            return (
              '<p style="mso-number-format:\'\\@\';">' + state_remark + '</p>'
            )
          },
        },
        操作处理失败信息: {
          field: 'handle_error_message',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },

        已扣额度: {
          field: 'quota_value',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        额度状态: {
          field: 'quota_status',
          //自定义回调函数
          callback: (value) => {
            var state_remark
            switch (value) {
              case -1:
                state_remark = '已退额度'
                break
              case 0:
                state_remark = '未付额度'
                break
              case 1:
                state_remark = '已付额度'
                break
              case 2:
                state_remark = '部分回退额度'
                break
            }

            return (
              '<p style="mso-number-format:\'\\@\';">' + state_remark + '</p>'
            )
          },
        },
        备注: {
          field: 'remark',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
        创建时间: {
          field: 'created_at',
          //自定义回调函数
          callback: (value) => {
            return '<p style="mso-number-format:\'\\@\';">' + value + '</p>'
          },
        },
      },
      dateArr: null,
      getCountBtnLoading: false,
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '添加',
      },
      form: {
        id: undefined,
        pay_proofs: [],
        pay_proof: null,
      },
      rules: {
        pay_proof: [
          { required: true, message: '支付凭证不能为空', trigger: 'blur' },
        ],
      },
      btnLoading: false,
      dialogFormVisible1: false,
      dialogStatus1: '',
      textMap1: {
        update: '编辑',
        create: '添加',
      },
      form1: {
        id: undefined,
        invoice_proofs: [],
        invoice_proof: null,
      },
      rules1: {
        invoice_proof: [
          { required: true, message: '发票凭证不能为空', trigger: 'blur' },
        ],
      },
      btnLoading1: false,
      dialogFormVisible2: false,
      dialogStatus2: '',
      textMap2: {
        update: '编辑',
        create: '添加',
      },
      form2: {
        id: undefined,
        make_up_diff_proofs: [],
        make_up_diff_proof: null,
      },
      rules2: {
        make_up_diff_proof: [
          { required: true, message: '补差明细不能为空', trigger: 'blur' },
        ],
      },
      btnLoading2: false,
      dialogFormVisible3: false,
      dialogStatus3: '',
      textMap3: {
        update: '编辑',
        create: '添加',
      },
      form3: {
        id: undefined,
        invoice_proofs: [],
        invoice_proof: null,
      },
      rules3: {
        invoice_proof: [
          { required: true, message: '发票凭证不能为空', trigger: 'blur' },
        ],
      },
      btnLoading3: false,
    }
  },
  created() {
    this.listLoading = false
    // this.getList()
  },
  watch: {
    showaddLog() {
      this.addLogform = {
        jin_jiang_orders: [],
        date: '',
        end_travel_date_start_at: '',
        end_travel_date_end_at: '',
      }
    },
    dateArr(newVal, oldVal) {
      if (newVal) {
        this.listQuery.start_at = newVal[0]
        this.listQuery.end_at = newVal[1]
      } else {
        this.listQuery.start_at = ''
        this.listQuery.end_at = ''
      }
    },
  },
  computed: {
    moment() {
      return moment
    },
    //状态：none：未处理 ； pending：处理中 ；completed：已完成； revoke_pending ：撤销处理中；revoked：已撤销
    status() {
      return (val) => {
        switch (val) {
          case 'none':
            return '未处理'
          case 'pending':
            return '处理中'
          case 'completed':
            return '已完成'
          case 'revoke_pending':
            return '撤销处理中'
          case 'revoked':
            return '已撤销'
        }
      }
    },
    revenue_type() {
      return (val) => {
        switch (val) {
          case 'retail_bonus':
            return '零售奖励'
          case 'referral_bonus':
            return '推荐奖励'
          case 'distribution_bonus':
            return '分销奖励'
          case 'expansion_bonus':
            return '级差奖励'
          case 'welfare_bonus':
            return '福利奖励'
          case 'founder_bonus':
            return '创始人分红'
          case 'vip_bonus':
            return 'VIP 分红'
          case 'super_vip_bonus':
            return '钻石分红'
        }
      }
    },
  },
  methods: {
    copyText(text) {
      if (!text) return this.$message.warning('内容为空')
      const textarea = document.createElement('textarea')
      textarea.value = text
      textarea.setAttribute('readonly', '')
      textarea.style.position = 'absolute'
      textarea.style.left = '-9999px'
      document.body.appendChild(textarea)
      textarea.select()
      try {
        document.execCommand('copy')
        this.$message.success('已复制到剪贴板')
      } catch (err) {
        this.$message.error('复制失败')
      }
      document.body.removeChild(textarea)
    },
    showInfo(row) {
      this.form3 = Object.assign({}, row.app_client_info) // copy obj
      this.form3.app_client_id = row.id
      this.dialogStatus3 = 'update'
      this.dialogFormVisible3 = true
      this.$nextTick(() => {
        this.$refs['form3'].clearValidate()
      })
    },
    enableEdit(row) {
      this.$set(row, '_editing', true)
      this.$set(row, '_make_up_diff_edit', row.make_up_diff)
    },

    submitMakeUpDiff(row) {
      row._editing = false

      if (row._make_up_diff_edit === row.make_up_diff) {
        return // 未修改，无需提交
      }

      const newValue = Number(row._make_up_diff_edit)

      // 可选：值合法性校验
      if (isNaN(newValue)) {
        this.$message.error('请输入有效数字')
        return
      }

      // 发请求保存（替换为你自己的 API 调用）
      request({
        url: `/api/backend/ledger/ledger-log-details-make-up-diff-store`,
        method: 'post',
        data: { id: row.id, money: newValue },
      })
        .then(() => {
          this.$message.success('修改成功')
          row.make_up_diff = newValue
          this.getList()
        })
        .catch(() => {
          this.$message.error('修改失败')
        })
    },
    geToOrderDetail(row) {
      this.$router.push(
        `/orderDetail?app_client_id=${row.app_client_id}&settlement_date=${row.settlement_date}&order_state=5&&system_order_status=101`
      )
    },
    resetForm() {
      this.form = {
        id: undefined,
        pay_proofs: [],
        pay_proof: null,
      }
      this.btnLoading = false
    },

    handlePay(row) {
      this.resetForm()
      this.dialogStatus = 'create'
      this.form.id = row.id
      this.form.pay_proof =
        row.pay_proofs && row.pay_proofs.length ? row.pay_proofs[0] : null
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    saveData() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.btnLoading = true
          this.form.pay_proofs = [this.form.pay_proof]
          request({
            url: '/api/backend/ledger/ledger-channel-commission-log-upload-pay-proofs',
            method: 'post',
            data: this.form,
          })
            .then((response) => {
              this.btnLoading = false
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '保存成功',
                type: 'success',
                duration: 2000,
              })
              this.getList()
            })
            .catch((err) => {
              this.btnLoading = false
            })
        }
      })
    },
    resetForm1() {
      this.form1 = {
        id: undefined,
        invoice_proofs: [],
        invoice_proof: null,
      }
      this.btnLoading1 = false
    },
    downloadInvoice(row) {
      const imageUrl = row.invoice_proofs[0] // 图片地址（可远程，也可本地）
      let ext = 'jpg'
      const match = imageUrl.match(/\.([a-zA-Z0-9]+)(?:\?.*)?$/)
      if (match) {
        ext = match[1]
      }
      const fileName = '发票.' + ext

      fetch(imageUrl, { mode: 'cors' })
        .then((response) => {
          if (!response.ok) {
            throw new Error('图片请求失败')
          }
          return response.blob()
        })
        .then((blob) => {
          const downloadUrl = URL.createObjectURL(blob)
          const a = document.createElement('a')
          a.href = downloadUrl
          a.download = fileName
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
          URL.revokeObjectURL(downloadUrl)
        })
        .catch((error) => {
          console.error('下载失败:', error)
        })
    },
    downloadDiff(row) {
      const imageUrl = row.make_up_diff_proofs[0] // 图片地址（可远程，也可本地）
      let ext = 'xls'
      const match = imageUrl.match(/\.([a-zA-Z0-9]+)(?:\?.*)?$/)
      if (match) {
        ext = match[1]
      }
      const fileName = '补价明细.' + ext

      fetch(imageUrl, { mode: 'cors' })
        .then((response) => {
          if (!response.ok) {
            throw new Error('文件请求失败')
          }
          return response.blob()
        })
        .then((blob) => {
          const downloadUrl = URL.createObjectURL(blob)
          const a = document.createElement('a')
          a.href = downloadUrl
          a.download = fileName
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
          URL.revokeObjectURL(downloadUrl)
        })
        .catch((error) => {
          console.error('下载失败:', error)
        })
    },
    handleInvoice(row) {
      this.resetForm1()
      this.dialogStatus1 = 'create'
      this.form1.id = row.id
      this.form1.invoice_proof =
        row.invoice_proofs && row.invoice_proofs.length
          ? row.invoice_proofs[0]
          : null
      this.dialogFormVisible1 = true
      this.$nextTick(() => {
        this.$refs['form1'].clearValidate()
      })
    },
    saveData1() {
      this.$refs['form1'].validate((valid) => {
        if (valid) {
          this.btnLoading1 = true
          this.form1.invoice_proofs = [this.form1.invoice_proof]
          request({
            url: '/api/backend/ledger/ledger-log-details-invoice-proofs',
            method: 'post',
            data: this.form1,
          })
            .then((response) => {
              this.btnLoading1 = false
              this.dialogFormVisible1 = false
              this.$notify({
                title: '成功',
                message: '保存成功',
                type: 'success',
                duration: 2000,
              })
              this.getList()
            })
            .catch((err) => {
              this.btnLoading1 = false
            })
        }
      })
    },
    resetForm2() {
      this.form2 = {
        id: undefined,
        make_up_diff_proofs: [],
        make_up_diff_proof: null,
      }
      this.btnLoading2 = false
    },
    handleDiff(row) {
      this.resetForm2()
      this.dialogStatus2 = 'create'
      this.form2.id = row.id
      this.form2.make_up_diff_proof =
        row.make_up_diff_proofs && row.make_up_diff_proofs.length
          ? row.make_up_diff_proofs[0]
          : null
      this.dialogFormVisible2 = true
      this.$nextTick(() => {
        this.$refs['form2'].clearValidate()
      })
    },
    saveData2() {
      this.$refs['form2'].validate((valid) => {
        if (valid) {
          this.btnLoading2 = true
          this.form2.make_up_diff_proofs = [this.form2.make_up_diff_proof]
          request({
            url: '/api/backend/ledger/ledger-log-details-upload-make-up-diff-proofs',
            method: 'post',
            data: this.form2,
          })
            .then((response) => {
              this.btnLoading2 = false
              this.dialogFormVisible2 = false
              this.$notify({
                title: '成功',
                message: '保存成功',
                type: 'success',
                duration: 2000,
              })
              this.getList()
            })
            .catch((err) => {
              this.btnLoading2 = false
            })
        }
      })
    },
    tableRowClassName({ row }) {
      if (
        row.confirm_expire_at &&
        new Date(row.confirm_expire_at) < new Date() &&
        row.confirm_status === 0
      ) {
        return 'row-red'
      }

      if (
        row.pay_status !== 1 &&
        row.pay_expire_at &&
        new Date(row.pay_expire_at) < new Date() &&
        row.pay_delayed_expire_at &&
        new Date(row.pay_delayed_expire_at) < new Date()
      ) {
        return 'row-yellow'
      }

      return ''
    },

    addLog() {
      this.showaddLog = true
    },
    downloadExcel() {
      let a = document.createElement('a')
      a.href = '/订单对账模板.xlsx'
      a.download = '订单对账模板.xlsx'
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click()
      a.remove()
    },
    postaddLog() {
      if (!this.addLogform.settlement_date) {
        this.$message.warning('请选择台账账期')
        return
      }
      return request({
        url: '/api/backend/ledger/create-log',
        method: 'POST',
        data: this.addLogform,
      })
        .then((res) => {
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: '操作成功',
            })
            this.showaddLog = false
            this.getList()
          }
        })
        .finally((val) => {
          console.log(val)
        })
    },
    handleImportUsers(file) {
      this.addLogform.users = []
      file = file.raw
      if (
        !(file.name.split('.')[1] == 'xlsx' || file.name.split('.')[1] == 'xls')
      ) {
        this.$message.error('上传文件格式不正确，请检查选择的文件')
        return
      }
      excel2Json(file, 1).then((excelData) => {
        console.log(excelData)
        // 处理业务
        if (excelData.length <= 0) {
          this.$message.error('数据不能为空')
          return
        }
        excelData.forEach((element, index) => {
          if (element['锦江订单号']) {
            this.addLogform.jin_jiang_orders.push({
              order_code: element['锦江订单号'],
              total_rate: element['锦江支付总价'],
            })
          }
          console.log(element, '--------', index)
        })
        this.importDataDialogVisible = true
        console.log(this.addLogform.jin_jiang_orders, '=============')
      })
    },
    changedata(val) {
      console.log(val)
      if (val) {
        this.listQuery.start_at = val[0]
        this.listQuery.end_at = val[1]
      } else {
        this.listQuery.start_at = ''
        this.listQuery.end_at = ''
      }
    },
    changeaddLogformdata(val) {
      console.log(val)
      if (val) {
        this.addLogform.end_travel_date_start_at = val[0]
        this.addLogform.end_travel_date_end_at = val[1]
      } else {
        this.addLogform.end_travel_date_start_at = ''
        this.addLogform.end_travel_date_end_at = ''
      }
    },
    handleExport(row) {
      var listQuery = {}
      listQuery.app_client_id = row.app_client_id
      listQuery.actual_end_travel_date_start_at = moment(row.settlement_date)
        .startOf('month')
        .format('YYYY-MM-DD')
      listQuery.actual_end_travel_date_end_at = moment(row.settlement_date)
        .endOf('month')
        .format('YYYY-MM-DD')
      listQuery.order_state_arr = [Number(5)]
      listQuery.system_order_status_arr = [Number(101)]

      if (listQuery.order_state_arr) {
        listQuery.order_state = listQuery.order_state_arr.join(',')
      }

      if (listQuery.system_order_status_arr) {
        listQuery.system_order_status =
          listQuery.system_order_status_arr.join(',')
      }

      if (listQuery.pay_state_arr) {
        listQuery.pay_state = listQuery.pay_state_arr.join(',')
      }
      this.$set(this.exportLoadingMap, row.id, true)

      listQuery.limit = 9999999999
      return request({
        url: '/api/backend/order/orderList',
        method: 'get',
        params: listQuery,
      })
        .then((response) => {
          return response.data.items
        })
        .finally(() => {
          this.$set(this.exportLoadingMap, row.id, false)
        })
    },
    handleExport2() {
      this.exportLoading = true
      return request({
        url: '/api/backend/globalReward/userLogs',
        method: 'get',
        params: {
          id: this.userLogsid,
        },
      })
        .then((response) => {
          console.log(response)
          return response.data.data
        })
        .finally((val) => {
          console.log(val)
          this.exportLoading = false
        })
    },
    getList() {
      this.listLoading = true
      request({
        url: '/api/backend/ledger/ledger-log-details',
        method: 'get',
        params: this.listQuery,
      }).then((response) => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    getCount() {
      if (this.addLogform.settlement_date == null) {
        return
      }
      this.getCountBtnLoading = false
      request({
        url: '/api/backend/ledger/getCount',
        method: 'get',
        params: {
          settlement_date: this.addLogform.settlement_date,
        },
      })
        .then((response) => {
          this.data = response.data
        })
        .finally(
          () =>
            function () {
              this.getCountBtnLoading = false
            }
        )
    },
    confirmPay(row) {
      this.$confirm('是否确认付款？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          request({
            url: '/api/backend/ledger/ledger-channel-commission-log-confirm-pay',
            method: 'post',
            data: {
              id: row.id,
            },
          }).then((res) => {
            console.log(res)
            if (res.code == 0) {
              this.$message({
                type: 'success',
                message: '操作成功',
              })
              this.getList()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
    handleDetail(row) {
      this.$confirm('是否确认手动扣款？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          request({
            url: '/api/backend/ledger/handle-detail',
            method: 'post',
            data: {
              id: row.id,
            },
          }).then((res) => {
            console.log(res)
            if (res.code == 0) {
              this.$message({
                type: 'success',
                message: '操作成功',
              })
              this.getList()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
    regenerateDetail(row) {
      this.$confirm('是否确认重新生成台账？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          request({
            url: '/api/backend/ledger/regenerate-detail',
            method: 'post',
            data: {
              id: row.id,
            },
          }).then((res) => {
            console.log(res)
            if (res.code == 0) {
              this.$message({
                type: 'success',
                message: '操作成功',
              })
              this.getList()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
    revoke(row) {
      this.$confirm('是否确认撤销？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          request({
            url: '/api/backend/globalReward/revoke',
            method: 'post',
            data: {
              id: row.id,
            },
          }).then((res) => {
            console.log(res)
            if (res.code == 0) {
              this.$message({
                type: 'success',
                message: '操作成功',
              })
              this.getList()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 6px;
}

::v-deep .row-red {
  background-color: #ffecec !important;
}

::v-deep .row-blue {
  background-color: #e0f0ff !important;
}

::v-deep .row-yellow {
  background-color: #fffbe0 !important;
}

::v-deep .el-date-editor .el-range-separator {
  width: 8%;
}
</style>
